<template>
  <div class="header-warp">
    <!-- <img class="top-bg" src="../../static/img/top-bg.png" mode="widthFix"> -->
    <div class="top-bg"></div>
    <div class="page-content">
      <cere-header ref="header" :componentContent="componentContent"></cere-header>
      <!-- <cere-banner :componentContent="componentContent" v-if="bannerVisible"></cere-banner> -->
    </div>
  </div>
</template>

<script>
  import CereBanner from './banner'
  import CereHeader from './header'
  export default {
    name: 'shopHeader',
    components: { CereHeader, CereBanner },
    props: {
      terminal: {
        type: Number,
        default: 4
      },
      componentContent: {
        type: Object
      }
    },
    data () {
      return {
        bannerVisible: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header-warp{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top:10px;
    // background:red;
    
    .top-bg {
      margin-top:220px;
      height:80px;
      width: 100%;
    }
    .page-content{
      width: 100%;
      display: flex;
      flex-direction: column;
      z-index: 10;
      margin-top: -300px;
    }
  }
</style>
